{% extends 'base/base.html' %}

{% block main %}
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3 class="mb-0">
                    <i class="fas fa-tag me-2"></i>
                    {% if tag %}编辑标签{% else %}创建新标签{% endif %}
                </h3>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}

                    {% if form.errors %}
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        请检查以下错误：
                        <ul class="mb-0 mt-2">
                            {% for field in form %}
                                {% for error in field.errors %}
                                    <li>{{ field.label }}: {{ error }}</li>
                                {% endfor %}
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <div class="mb-3">
                        <label for="{{ form.name.id_for_label }}" class="form-label">标签名称 *</label>
                        {{ form.name }}
                        <div class="form-text">标签名称应该简洁明了，便于识别</div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.color.id_for_label }}" class="form-label">标签颜色</label>
                        <div class="input-group">
                            {{ form.color }}
                            <span class="input-group-text">
                                <i class="fas fa-palette"></i>
                            </span>
                        </div>
                        <div class="form-text">选择标签的显示颜色</div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.parent.id_for_label }}" class="form-label">父级标签</label>
                        {{ form.parent }}
                        <div class="form-text">选择此标签的父级标签，用于创建标签层级</div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.description.id_for_label }}" class="form-label">标签描述</label>
                        {{ form.description }}
                        <div class="form-text">可选的描述信息，说明标签的用途</div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{% url 'main:tag_list' %}" class="btn btn-secondary me-md-2">取消</a>
                        <button type="submit" class="btn btn-primary">
                            {% if tag %}更新标签{% else %}创建标签{% endif %}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 颜色参考 -->

    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// 为表单字段添加Bootstrap样式
document.getElementById('{{ form.name.id_for_label }}').classList.add('form-control');
document.getElementById('{{ form.color.id_for_label }}').classList.add('form-control', 'form-control-color');
document.getElementById('{{ form.parent.id_for_label }}').classList.add('form-control');
document.getElementById('{{ form.description.id_for_label }}').classList.add('form-control');
</script>
{% endblock %}